<template>
    <div :class="`server-goods-info ${mode} ${isBlock ? 'block' : ''}`">
        <div class="goods-image">
            <img class="image-value" :src="imageSrc" alt="">
        </div>
        <div class="goods-info">
            <div class="name-and-sku">
                <div class="name title-color">{{info.prod_name}}</div>
                <div class="sku">{{info.sku_name}}</div>
            </div>
            <div class="count tip-color">x{{info.quantity - (info.refund_quantity || 0)}}</div>
        </div>
    </div>
</template>

<script>
import { createShopImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'ServerGoodsInfo', // 服务产品信息
    mixins: [ModeMixin],
    props: {
        info: {
            type: Object,
            default: () => {},
        },
        isBlock: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        imageSrc() {
            return createShopImageSrc(this.$props.info.pic);
        },
    },
};
</script>

<style lang="less">
.server-goods-info {
    .mode-white();
    .flex();
    .m-b(@shop-gap-md);
    &:last-child {
        .m-b(0);
    }
    &.block {
        box-shadow: 0px 4px 16px -4px rgba(51, 51, 51, 0.06);
        border-radius: @border-radius;
        .p-h(@shop-bag-gap);
        .p-v(@shop-gap-md);
        .m-h(@shop-bag-gap);
        .m-b(@shop-bag-gap);
    }

    .goods-image {
        width: 70px;
        height: 70px;
        border-radius: @border-radius;
        border: @border;
        .image-value {
            width: 100%;
            height: 100%;
        }
    }
    .goods-info {
        flex: 1;
        .m-l(@shop-gap);
        .flex();
        justify-content: space-between;
        .name-and-sku {
            max-width: 80%;
            .name {
                font-size: @font-size;
                color: @text-color;
                line-height: 19px;
            }
            .sku {
                font-size: @shop-font-size-sm;
                opacity: .7;
                color: @tip-color;
                .m-t(@gap-sm);
            }
        }
        .count {
            font-size: @shop-font-size;
            color: @text-color;
        }
    }
}
</style>
